<template>
  <el-row :gutter="6">
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/main' }">信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>我的待办</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col class="maincont-container">
        <my-tableX
          v-loading="loading"
          element-loading-text="加载中......"
          element-loading-spinner="el-icon-loading"
          tableHeight="340px"
          @dataEdit="editData"
          :tableData="todoList"
          :configs="configs"
        ></my-tableX>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import myTableX from "../../../../components/base/tableX";
var uid;
export default {
  components: { myTableX },
  inject: ["reload"],
  created() {
    uid = this.$store.state.m_user.userInfo.id;
    this.$api.startitem
      .getTodoList(uid)
      .then(res => {
        if (res.code == 200) {
          this.$message.success("加载成功");
          console.log(res.data);
          this.todoList = [];
          res.data.forEach(item => {
            this.todoList.push(item);
          });
        }
      })
      .catch(err => {
        this.$message.error("加载失败：" + err);
      });
  },

  data() {
    return {
      todoList: [],
      configs: {
        columns: [
          { field: "flowNodeName", name: "待办任务" },
          { field: "createTime", name: "时间" }
        ],
        operationCol: {
          show: true,
          edit: true,
          options: {
            edit: {
              text: "处理"
            }
          }
        },
        showFilterRow: {
          show: true
        }
      },
      loading: false
    };
  },
  methods: {
    editData(row) {
      console.log(row);
      this.$router.push({
        path: row.path,
        query: { id: row.businessId, todo: true }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.col-flex {
  padding-top: 30px;
  height: 100%;
  box-sizing: border-box;
  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }
  .maincont-container {
    height: calc(~"100% - 10px");
    margin-top: 3px;

    .data-form {
      padding: 0px 150px;

      .el-select {
        display: block;
      }

      .upload-demo {
        text-align: left;
      }
    }
  }
}
</style>